<template>
  <StElTable class="st-el-table-demo" ref="steltable" :options="options" :datas="tableData">
    <template #append>
      <el-table-column
          label="操作"
          width="200">
        <template #default="{row,column,$index}">
          <StElButtonGroup :group-param="{row,column,$index}"
                           :operationMoreButtonOptions="{stype: 'link'}"
                           :operations="tableOperations">
          </StElButtonGroup>
        </template>
      </el-table-column>

    </template>
  </StElTable>
</template>

<script>
export default {
  name: "StElTableDemo",
  data() {
    return {
      options: [
        {
          label: '展开',
          type: 'expand'
        },
        {
          label: '昵称',
          prop: 'nickname'
        },
        {
          label: '头像',
          prop: 'avatar',
          stype: 'image',
        },
        {
          label: '性别',
          prop: 'gender'
        },
        {
          label: '是否锁定',
          prop: 'isLocked'
        }
      ],
      tableData:[
        {
          id: '1',
          nickname: '张三',
          gender: '男',
          isLocked: true,
          avatar: '/guide/project/table-demo-avatar.jpg',
        }
      ],
      tableOperations: [{
        label: '删除',
        stype: 'link',
        action: ({groupParam}) => {
          console.log(groupParam.row)
        }
      },
        {
          label: '修改',
          stype: 'link',
          action: ({groupParam}) => {
            console.log(groupParam.row)
          }
        },
        {
          label: '操作1',
          stype: 'link',
          position: 'more',
          action: ({groupParam}) => {
            console.log(groupParam.row)
          }
        },
        {
          label: '操作2',
          stype: 'link',
          position: 'more',
          action: ({groupParam}) => {
            console.log(groupParam.row)
          }
        },
        {
          label: '操作3',
          stype: 'link',
          position: 'more',
          action: ({groupParam}) => {
            console.log(groupParam.row)
          }
        },
      ]
    }
  },
  methods: {}
}
</script>

<style>
.st-el-table-demo table{
  margin: 0 !important;
}
</style>